<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>疫情封控区食材购买平台</title>
  <!-- jquery -->
  <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
  <!-- bootstrap -->
  <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
  <!-- jquery-validator -->
  <script type="text/javascript" th:src="@{/jquery-validation/jquery.validate.min.js}"></script>
  <script type="text/javascript" th:src="@{/jquery-validation/localization/messages_zh.min.js}"></script>
  <!-- layer -->
  <script type="text/javascript" th:src="@{/layer/layer.js}"></script>
  <!-- md5.js -->
  <script type="text/javascript" th:src="@{/js/md5.min.js}"></script>
  <!-- common.js -->
  <script type="text/javascript" th:src="@{/js/common.js}"></script>
  <style>
    body {
      /*background: url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg') no-repeat;*/
      /*background: url('https://www.csxbank.com/Upload/Template/yizhu/RecommendPhoto/Original/202008/a7e39eb5-f60d-414d-8ec4-c746a669ff81.jpg') no-repeat;*/
      background-image: url("/img/bg.png") ;
      background-size: 100% 130%;
    }

    #login_box {
      width: 20%;
      height: 400px;
      background-color: #00000060;
      margin: auto;
      margin-top: 10%;
      text-align: center;
      border-radius: 10px;
      padding: 50px 50px;
    }

    h2 {
      color: #ffffff90;
      margin-top: 5%;
    }

    #input-box {
      margin-top: 5%;
    }

    span {
      color: #fff;
    }

    input {
      border: 0;
      width: 60%;
      font-size: 15px;
      color: #fff;
      background: transparent;
      border-bottom: 2px solid #fff;
      padding: 5px 10px;
      outline: none;
      margin-top: 10px;
    }

    button {
      margin-top: 50px;
      width: 60%;
      height: 30px;
      border-radius: 10px;
      border: 0;
      color: #fff;
      text-align: center;
      line-height: 30px;
      font-size: 15px;
      background-image: linear-gradient(to right, #30cfd0, #330867);
    }

    #sign_up {
      margin-top: 45%;
      margin-left: 60%;
    }

    a {
      color: #b94648;
    }
  </style>
</head>

<body>
<!--<img src="/img/sanxiang.webp" width="10%" height="10%" >-->
<img  src="/img/img.png" width="10%" height="10%" style="opacity: 60%">
<form name="loginForm" id="loginForm" method="post">
  <div id="login_box">
    <h2>LOGIN</h2>
    <div id="input_box">
      <input type="text" id="mobile" name="mobile" placeholder="请输入手机号">
    </div>
    <div class="input_box">
      <input type="password" id="password" name="password" placeholder="请输入密码">
    </div>
    <button onclick="login()">登录</button><br>
  </div>
</form>

</body>
<script>
  function login() {
    $("#loginForm").validate({
      submitHandler: function (form) {
        doLogin();
      }
    });
  }

  function doLogin() {
    g_showLoading();

    var password = $("#password").val();
    // var salt = g_passsword_salt;
    // var str = salt.charAt(0) + salt.charAt(2) + inputPass + salt.charAt(5) + salt.charAt(4);


    $.ajax({
      url: "/login/doLogin",
      type: "POST",
      data: {
        mobile: $("#mobile").val(),
        password: password
      },
      success: function (data) {
        layer.closeAll();
        if (data.code == 200) {
          layer.msg("成功");
          console.log(data);
          document.cookie = "userTicket=" + data.object;
          window.location.href = "/goods/toSekillList";
        } else {
          layer.msg(data.message);
        }
      },
      error: function () {
        layer.closeAll();
      }
    });
  }
</script>
</html>